<template>
  <div class="radio-edit">
    <el-input
    type="textarea"
    autosize
    placeholder="请输入题目内容"
    v-model="title"
    @change="changeTitle">>
  </el-input>
  <el-checkbox v-model="checked" class="isness" @change="changeNess" style="margin-bottom: 10px">必答</el-checkbox>
  <el-checkbox v-model="isRandom" class="isness" @change="changeRandom" style="margin-bottom: 10px">选项乱序</el-checkbox>
  <el-divider style="margin-top: 10px">选项</el-divider>


  <el-scrollbar max-height="500px" style="padding-right: 15px; ">
    <div v-for="(option, index) in options">
      <option-design
        :text="option.text"
        :description="option.description"
        :isDefault="option.isDefault"
        :index="index"
        @addOption="addOption(option)"
        @deleteOption="deleteOption(option)"
        @changeDefault="changeDefault(option)"
        @changeText="changeText"
        @changeDes="changeDes"
        @upmove="upmove"
        @downmove="downmove"
      >
      </option-design>
    </div>
  </el-scrollbar>
  <div><el-button class="add-option" @click="addFinalOption">添加选项</el-button></div>
  <el-button class="finish-edit" @click="finish">完成编辑</el-button>
</div>
</template>

<script>
import OptionDesign from './OptionDesign.vue'
export default ({
  name:'RadioEdit',
  data(){
   return {
   }
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    checked: {
      type: Boolean,
      default: true,
    },
    isRandom: {
      type: Boolean,
      default: false,
    },
    options: {
      type: Array,
      default: [],
    }
  },
  components: {
    OptionDesign,
  },
  methods: {
    changeTitle() {
      this.$emit('changeTitle',this.title)
    },

    changeNess() {
      this.$emit('changeNess', this.checked)
    },

    changeRandom() {
      this.$emit('changeRandom', this.isRandom)
    },

    finish() {
      this.$emit('finish')
    },

    addOption(option) {
      this.$emit('addOption', this.options.indexOf(option))

    },

    addFinalOption() {
      this.$emit('addFinalOption')
    },

    error(message) {
      this.$notify.error({
          title: '错误',
          message: message,
        });
    },

    deleteOption(option) {
      if(this.options.length > 1)
        this.$emit('deleteOption', this.options.indexOf(option))
      else{
        this.error('选项不可少于一个')
      }
    },

    changeDefault(option) {
      this.$emit('changeDefault', this.options.indexOf(option))
    },

    changeText(data) {
      this.$emit('changeText', data)
    },

    changeDes(data) {
      this.$emit('changeDes', data)
    },

    upmove(index) {
      this.$emit('upmove', index)
    },

    downmove(index) {
      this.$emit('downmove', index)
    },
  }

})
</script>

<style scoped src='assets/css/editcss/chooseEdit.css'>
  /* @import url('../css/chooseEdit.css'); */
</style>
